<!DOCTYPE HTML>
<html>
	<head>
		<title>please enter your title</title>
		<meta charset="utf-8">
		<meta name="Author" content="潭州学院-阿飞老师">
		<style type='text/css'>
			*{ margin:0; padding:0;}
			body{
				background:url(img/bg.jpg) center top no-repeat;;
			}
			#wrap{
				width:1090px;
				height:429px;
				margin:160px auto;
				overflow:hidden;
			}
			#wrap ul{
				width:120%;
			}
			#wrap ul li{
				list-style:none;
				width:100px;
				height:429px;
				float:left;
			}
			#wrap ul li .txt{
				width:100px;
				height:429px;
				background:rgba(0,0,0,.5);
				overflow:hidden;
			}
			#wrap ul li .txt p{
				padding:0px 42px;
				background:rgba(0,0,0,.5);
				color:#fff;
				font-family:'Microsoft yahei';
				font-size:14px;
			}
		</style>
	</head>
	<body>
		
		<div id="wrap">
			<ul>
				<li style="background-image:url(img/1.jpg)">
					<div class='txt'>
						<p>我的个人拉萨之旅丨丨故事之城</p>
					</div>
				</li>
				<li style="background-image:url(img/2.jpg)">
					<div class='txt'>
						<p>我的个人拉萨之旅丨丨故事之城</p>
					</div>
				</li>
				<li style="background-image:url(img/3.jpg)">
					<div class='txt'>
						<p>我的个人拉萨之旅丨丨故事之城</p>
					</div>
				</li>
				<li style="background-image:url(img/4.jpg); width:789px;">
					<div class='txt'>
						<p>我的个人拉萨之旅丨丨故事之城</p>
					</div>
				</li>
			</ul>
		</div>

		<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
		<script type="text/javascript">
			$('#wrap ul li').hover(function(){
				$(this).stop().animate({
					width : '789px'
				},500).siblings().stop().animate({
					width : '100px'
				},500);
			});
		</script>
	</body>
</html>